<template>
    <div class="ai-chat border-1-soild-black b-rd-1">
        <div class="body">1</div>
        <textarea ref="chatinput" :rows="row" placeholder="请输入文字" class="footer"></textarea>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

// 使用类型注解
const chatinput = ref<HTMLTextAreaElement | null>(null);
const row = ref(2);

onMounted(() => {
    if (chatinput.value) {
        chatinput.value.addEventListener('input', (e: Event) => {
            const target = e.target as HTMLTextAreaElement; // 类型断言
            chatinput.value!.style.height = "auto"; // 重置高度
            chatinput.value!.style.height = target.scrollHeight +"px"; // 重置高度
        });
    }
});
</script>

<style lang="scss" scoped>
.ai-chat {
    height: 100%;
    width: 100%;
    padding: 16px;
    position: relative;

    .body {}

    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 4px);
        background-color: #333;
        color: white;
        font-size: 16px;
        border-radius: 4px;
    }
}
</style>